 <template lang="html">
   <div class="form-box">
     <group class="input-defalut">
       <x-input placeholder="输入手机号" type="tel" v-model="forget.phone" :min="11" :max="11" is-type="china-mobile" required @on-change="onChange" ref="phone">
         <img src="../../assets/mobile.png" alt="" slot="label" class="input-icon phone">
       </x-input>
     </group>
     <group class="input-defalut">
       <x-input placeholder="输入验证码" type="number" v-model="forget.code" class="weui-vcode" :min="6" @on-change="onChange" required ref="identify" :cellphone="forget.phone">
         <img src="../../assets/email.png" alt="" slot="label" class="input-icon code">
         <countdown slot="right" @click.native="send" ref="countBtn" :disabled="disabled"></countdown>
       </x-input>
     </group>
     <group class="input-defalut">
       <x-input placeholder="输入新的密码" v-model="forget.password" :is-type="passwordValidate" required type="password" ref="password" @on-change="onChange">
         <img src="../../assets/password.png" alt="" slot="label" class="input-icon password">
       </x-input>
     </group>
     <div class="btn-box">
       <x-button class="btn" :disabled="!phoneValid||!passwordValid||!identifyValid" @click.native="sure">确认</x-button>
     </div>
   </div>
 </template>

 <script>
 import { Group, XInput, XButton } from 'vux'
 import Countdown from '../Countdown/Countdown.vue'
 import { mapMutations } from 'vuex'
 import { passwordValid } from '../../utils/validate'
 export default {
   name: 'Foget',
   created () {
     this.setFooter(false)
     this.setShowBack(true)
     this.setBackground(true)
   },
   data () {
     return {
       disabled: false,
       phoneValid: false,
       passwordValid: false,
       identifyValid: false,
       passwordValidate: passwordValid,
       forget: {
         phone: '',
         code: '',
         password: ''
       }
     }
   },
   methods: {
     onChange () {
       this.phoneValid = this.$refs.phone.valid
       this.passwordValid = this.$refs.password.valid
       this.identifyValid = this.$refs.identify.valid
       // 发送验证码手机检验
       this.disabled = !this.phoneValid
     },
     send () {
       this.disabled = true
       this.$refs.countBtn.run()
       this.disabled = false
     },
     sure () {
       this.$store.dispatch('forgetPassword', this.forget).then((res) => {
         let result = res.data
         if (result.Code === 202) {
           this.setToast({
             show: true,
             type: '',
             text: result.Message
           })
           this.setLogin(true)
         } else {
           this.setToast({
             show: true,
             type: 'text',
             text: result.Message
           })
         }
       })
     },
     ...mapMutations({
       setLogin: 'setPopup',
       setFooter: 'setFooter',
       setShowBack: 'setShowBack',
       setToast: 'setShowToast',
       setBackground: 'setBackground'
     })
   },
   beforeRouteLeave (to, from, next) {
     this.setLogin(true)
     next()
   },
   components: {
     Group,
     XInput,
     XButton,
     Countdown
   }
 }
 </script>

 <style lang="css">
 </style>
